<template>
  <ul class="mvlist">
    <li v-for="item in mvLi" :key='item.id'>
      <div class="cover">
        <img :src="`${item.imgurl}?param=137y103`">
        <a href="javascript:;" class="msk"></a>
        <a href="javascript:;" class="hd-icon btn"></a>
      </div>
      <p class="overel dec" :title="item.name">{{item.name}}</p>
    </li>
  </ul>
  <Page v-if="this.totalPage!=1" :curPage="curPage" :midPagesList="midPagesList" :totalPage="totalPage" @prev="prevPage"
    @next="nextPage" @changeP="changePage"></Page>
</template>

<script>
import Page from '../../components/Page/page.vue'
export default {
  name: 'mv',
  components: {
    'Page': Page
  },
  data () {
    return {
      id: this.$route.query.id,
      curPage: 1,
      mvLi: [],
      totalPage: 1,
      midPagesList: [],
      totalPageTime: ''
    }
  },
  methods: {
    async info () {
      const { data: mv } = await this.$http.get('artist/mv', {
        params: {
          id: this.id,
          limit: 12,
          offset: (this.curPage - 1) * 12
        }
      })
      if (mv.code == 200) {
        this.mvLi = mv.mvs
      }
    },

    async getTotalPage () {
      const { data: mv } = await this.$http.get('artist/mv', {
        params: {
          id: this.id,
          limit: 12,
          offset: (this.totalPage - 1) * 12
        }
      })
      if (mv.hasMore) {
        this.totalPage++
        this.getTotalPage()
      }
      if (this.totalPageTime) {
        clearTimeout(this.totalPageTime)
      }
      setTimeout(() => {
        if (this.totalPage < 8) {
          let li = []
          for (let i = 2; i < this.totalPage; i++) {
            li.push(i)
            this.midPagesList = li
          }
          return
        }
        if (this.curPage <= 5 || this.curPage == 1) {
          this.midPagesList = [2, 3, 4, 5, 6, 7, 8]
          return
        }
        if (this.curPage >= this.totalSongsNum - 4 || this.curPage == this.totalPage) {
          this.midPagesList = [this.curPage - 7, this.curPage - 6, this.curPage - 5, this.curPage - 4, this.curPage - 3, this.curPage - 2, this.curPage - 1]
          return
        }
        this.midPagesList = [this.curPage - 3, this.curPage - 2, this.curPage - 1, this.curPage, this.curPage + 1, this.curPage + 2, this.curPage + 3]
      }, 800)
    },
    async getMv () {
      const { data: mv } = await this.$http.get('artist/mv', {
        params: {
          id: this.id,
          limit: 12,
          offset: (this.curPage - 1) * 12
        }
      })
      if (mv.code == 200) {
        this.mvLi = mv.mvs
      }
      setTimeout(() => {
        if (this.totalPage < 8) {
          let li = []
          for (let i = 2; i < this.totalPage; i++) {
            li.push(i)
            this.midPagesList = li
          }
          return
        }
        if (this.curPage <= 5 || this.curPage == 1) {
          this.midPagesList = [2, 3, 4, 5, 6, 7, 8]
          return
        }
        if (this.curPage >= this.totalSongsNum - 4 || this.curPage == this.totalPage) {
          this.midPagesList = [this.curPage - 7, this.curPage - 6, this.curPage - 5, this.curPage - 4, this.curPage - 3, this.curPage - 2, this.curPage - 1]
          return
        }
        this.midPagesList = [this.curPage - 3, this.curPage - 2, this.curPage - 1, this.curPage, this.curPage + 1, this.curPage + 2, this.curPage + 3]
      }, 800)
    },
    changePage (val) {
      if (this.curPage == val) {
        return
      }
      this.curPage = val;
      this.getMv();
    },
    prevPage () {
      if (this.curPage == 1) {
        return
      } else {
        this.curPage--
        this.getMv()
      }
    },
    nextPage () {
      if (this.curPage == this.totalPage) {
        return
      } else {
        this.curPage++
        this.getMv()
      }
    },
  },
  created () {
    this.info()
    this.getTotalPage()

  },
}
</script>

<style lang='less' scoped>
.mvlist {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 0 -29px;
  li {
    display: inline-block;
    width: 137px;
    height: 140px;
    padding: 0 0 30px 29px;
    overflow: hidden;
    .cover {
      position: relative;
      width: 137px;
      height: 103px;
      img {
        width: 100%;
      }
      .msk {
        background-position: 0 -1170px;
      }
      .btn {
        position: absolute;
        width: 44px;
        height: 44px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-position: -30px -135px;
        &:hover {
          background-position: -30px -85px;
        }
      }
    }
    .dec {
      padding: 8px 0 3px;
      font-size: 14px;
    }
  }
}
</style>